<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品模块</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background-color: #f5f5f5;
			}

			.box {
				position: relative;
				width: 298px;
				height: 415px;
				background-color: #ffffff;
				/* 让块级盒子水平居中对齐 */
				margin: 100px auto;
			}

			.box img {
				width: 100%;
				height: 50%;
			}

			.review {
				height: 70px;
				font-size: 14px;
				/* 因为p没有设置width属性，所以padding不会撑开盒子 */
				padding: 0 28px;
				margin-top: 30px;
			}

			.appraise {
				font-size: 12px;
				color: #b0b0b0;
				margin: 20px;
				padding: 0 28px;
			}

			.info h4 {
				display: inline-block;
				font-weight: 400;
			}

			.info {
				font-size: 14px;
				margin-top: 15px;
				padding: 0 28px;
			}

			.info span {
				color: #FF6700;
			}

			.info em {
				font-style: normal;
				color: #ebe4e0;
				margin: 0 6px 0 15px;
			}

			a {
				
				text-decoration: none;
				color: #333;
			}
			.boxff {
				position: absolute;
				top: 15px;
				left: 238px;
				width: 50px;
				height: 25px;
				border: 5px solid #ff0000;
			}
			.span {
				color: red;
				padding-left: 12px;
				font-family: 华文琥珀;
				line-height: 25px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="boxff"><span class="span">Hot</span></div>
			<a href="#"><img src="imgs/img.jpg" class="img"></a>
			<p class="review"><a href="#">快递牛，整体不错蓝牙可以说是秒连。红米给力</a></p>
			<div class="appraise">来自于 171735345 的评价</div>
			<div class="info">
				<h4> <a href="#">Redmi Airdots真无线蓝...</a></h4>
				<em>|</em>
				<span>99.9元</span>
			</div>
		</div>
	</body>
</html>
